html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
body {
    background-image: url("./bg.png");
    background-position: center;
    background-size: cover;
}

@font-face {
    font-family: monoton;
    src: url("./Monoton-Regular.ttf");
}

.monoton {
    font-family: monoton;
    color: #fff;
    text-align: center;
    /* animation: neon2 1.5s ease-in-out infinite alternate; */
    font-size: 3em;
    position: relative;
}
.monoton:after {
    content: attr(value);
    position: absolute;
    width: 100%;
    left: 0;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff1177,
        0 0 70px #ff1177, 0 0 80px #ff1177, 0 0 100px #ff1177,
        0 0 150px hsl(334, 100%, 53%);
    animation: monotonAni 3.5s ease-in-out infinite alternate;
}
.page {
    height: 100vh;
    backdrop-filter: brightness(70%);
}
.login {
    margin: auto;
    width: 100%;
}
label.is-white {
    color: #ffffff !important;
    letter-spacing: 2px;
    /* animation: neon2 1.5s ease-in-out infinite alternate; */
    /* animation: none; */
}
@keyframes monotonAni {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.5;
    }
}
@keyframes neon1 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
            0 0 40px #ff1177, 0 0 70px #ff1177, 0 0 80px #ff1177,
            0 0 100px #ff1177, 0 0 150px #ff1177;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
            0 0 20px #ff1177, 0 0 35px #ff1177, 0 0 40px #ff1177,
            0 0 50px #ff1177, 0 0 75px #ff1177;
    }
}

@keyframes neon2 {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
            0 0 40px #228dff, 0 0 70px #228dff, 0 0 80px #228dff,
            0 0 100px #228dff, 0 0 150px #228dff;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
            0 0 20px #228dff, 0 0 35px #228dff, 0 0 40px #228dff,
            0 0 50px #228dff, 0 0 75px #228dff;
    }
}
